<template>
	<view class="container">
		<scroll-view scroll-y class="scroll">
			<view class="c-center">
				<view class="address">
					<view class="shdz">
						收货地址
					</view>
					<view class="xian"></view>
					<view class="xxmsg">
						<view class="msgs">
							<view class="msg name">姓名</view>
							<view class="msg">联系电话</view>
							<view class="msg">所在地区</view>
							<view class="msg">详细地址</view>
						</view>
						<view class="grmsg">
							<input type="text" placeholder="请输入姓名" v-model="site.realName">
							<input type="text" placeholder="请输入联系电话" v-model="site.phone">
							<input type="text" placeholder="请输入所在省市区" v-model="address">
							<input type="text" placeholder="请输入详细地址" v-model="site.detail">
						</view>
					</view>
				</view>
				<view class="goods">
					<view class="spnum">
						共1件商品
					</view>
					<view class="xian"></view>
					<view class="taocan">
						<view class="taocan_l">
							<view class="tcleft">
								<image src="../../../static/image/shop/nav1.png" mode=""></image>
							</view>
							<view class="tcright">
								<view class="tcname">{{product.storeName}}</view>
								<view class="moren">默认</view>
								<view class="jiage">￥{{product.price}}</view>
							</view>
						</view>
						<view class="taocan_r">
							x1
						</view>
					</view>
				</view>

				<view class="freight">
					<view class="f_top">
						<view class="top_l">快递费用</view>
						<view class="top_r">免运费</view>
					</view>
					<view class="xian"></view>
					<view class="bzmsg">
						<view class="beizhu">
							备注信息
						</view>
						<view class="bz_ipt">
							<textarea type="text" placeholder="请先添加备注(150字以内)" v-model="mark"></textarea>
						</view>
					</view>
				</view>

				<view class="bill">
					<view class="kpmsg">
						开票信息
						<text>（不填写默认开个人发票）</text>
					</view>
					<view class="xian"></view>
					<view class="list">
						<view class="item">
							<view class="label_txt">公司姓名</view>
							<input class="gsxm" type="text" v-model="list.companyName" placeholder="请输入公司名称">
						</view>
						<view class="item">
							<view class="label_txt letsps">税号</view>
							<input type="text" v-model="list.shuihao" placeholder="请输入税号">
						</view>
						<view class="item">
							<view class="label_txt khh">开户行</view>
							<input class="yhkh" type="text" v-model="list.bank" placeholder="请输入开户行">
						</view>
						<view class="item">
							<view class="label_txt letsps">账号</view>
							<input type="text" v-model="list.bankCard" placeholder="请输入银行账号">
						</view>
						<view class="item">
							<view class="gsname letsps">地址</view>
							<input type="text" v-model="list.address" placeholder="请输入地址">
						</view>
						<view class="item">
							<view class="label_txt letsps">电话</view>
							<input type="text" v-model="list.phone" placeholder="请输入电话">
						</view>
					</view>
				</view>
			</view>
		</scroll-view>


		<view class="total">
			<view class="heji">
				<view class="hjjg">合计：</view>
				<view class="jiage">￥{{product.price}}</view>
			</view>
			<view class="hjbtn">
				<button class="ljzf" @click="handlePayment">立即支付</button>
			</view>
		</view>
	</view>
</template>

<script>
	import $http from "@/ajax/http.js"
	export default {
		data() {
			return {
				// token
				token: wx.getStorageSync('shopToken'),
				ids: '',
				product: '',
				siteData: '',
				site: {
					realName: '',
					phone: '',
					detail: ''
				},
				// 默认地址ID
				addressId: '',
				// 地址
				address: '',
				// 预下单id
				attrId: '',
				// 备注
				mark: '',
				// 预下单编号
				preOrderNo: '',
				// 订单编号
				orderNo: ''
			}
		},
		onLoad(options) {
			this.ids = options.id
			console.log(this.ids, "this.ids");
			this.pageList();
			this.adresList();
		},
		methods: {
			pageList() {
				$http.request({
					header: {
						"Authori-zation": this.token
					},
					url: `/api/front/product/detail/${this.ids}`,
				}, 2).then((res) => {
					console.log(res.productValue, "商品");
					this.product = res.productInfo
					console.log(this.product, "this.product");
					this.attrId = res.productValue['默认'].id
				})
			},

			adresList() {
				$http.request({
					header: {
						"Authori-zation": this.token
					},
					url: '/api/front/address/default',
				}, 2).then((res) => {
					console.log(res, "地址");
					this.siteData = res.data
					this.site = res
					this.address = res.province + res.city + res.district;
					// 默认地址id
					this.addressId = res.id
				})
			},


			handlePayment() {
				// 调用预支付接口
				this.prepayment()
					.then(() => {
						// 预支付成功后调用创建订单接口
						this.createOrder()
							.then(() => {
								// 创建订单成功后调用订单支付接口
								this.orderPay();
							})
							.catch(error => {
								console.error('创建订单失败:', error);
								// 处理创建订单失败的情况
							});
					})
					.catch(error => {
						console.error('预支付失败:', error);
						// 处理预支付失败的情况
					});
			},
			prepayment() {
				const orderNo = {
					attrValueId: this.attrId,
					productId: this.ids,
					productNum: 1
				};

				return $http.request({
					header: {
						"Authori-zation": this.token
					},
					url: "/api/front/order/pre/order",
					data: {
						orderDetails: [orderNo],
						preOrderType: 'buyNow',
					},
					method: 'POST'
				}, 2).then((res) => {
					console.log(res, "this.res");
					this.preOrderNo = res.preOrderNo;
				});
			},
			createOrder() {
				const data = {
					addressId: this.addressId,
					mark: this.mark,
					preOrderNo: this.preOrderNo,
					realName: this.site.realName,
					phone: this.site.phone,
					shippingType: 1,
					payChannel: 'routine',
					payType: 'weixin',
					useIntegral: false
				};

				return $http.request({
					header: {
						"Authori-zation": this.token
					},
					url: '/api/front/order/create',
					data: data,
					method: 'POST'
				}, 2).then((res) => {
					// 处理创建订单成功的情况
					console.log('订单创建成功:', res);
					this.orderNo = res.orderNo;
				});
			},

			orderPay() {
				return $http.request({
					header: {
						"Authori-zation": this.token
					},
					url: '/api/front/pay/payment',
					data: {
						orderNo: this.orderNo,
						payChannel: 'routine',
						payType: 'weixin',
					},
					method: 'POST'
				}, 2).then((res) => {
					console.log(res, "订单支付");
					const timeStamp = res.jsConfig.timeStamp.toString(); // 将时间戳转换为字符串
					console.log(timeStamp, "当前的时间");
					wx.requestPayment({
						timeStamp: res.jsConfig.timeStamp,
						nonceStr: res.jsConfig.nonceStr,
						package: res.jsConfig.packages,
						signType: res.jsConfig.signType,
						paySign: res.jsConfig.paySign,
						success: (res) => {
							// 处理支付成功的逻辑
							console.log(res, "支付成功");
							$http.request({
								header: {
									"Authori-zation": this.token
								},
								url: '/api/front/pay/queryPayResult',
								data: {
									orderNo: this.orderNo,
								}
							}, 2).then((res) => {
								console.log(res, "查询支付结果");
								if (res === true) {
									wx.navigateTo({
										url: "/pages/shop/orderMangement/index"
									})
								}
							})
						},
						fail: (error) => {
							console.error('支付失败:', error);
							// 处理支付失败的逻辑
						}
					});
				}).catch(error => {
					console.error('订单支付失败:', error);
					// 处理订单支付失败的情况
				});
			},

		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		background-color: #f5f5f5;
		display: flex;
		align-items: center;
		flex-direction: column;

		.scroll {
			height: calc(100vh - 154upx);

			.c-center {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
			}
		}

		.address {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			width: 674rpx;
			height: 270rpx;
			background-color: #ffffff;
			margin-top: 20rpx;
			border-radius: 20rpx;

			.shdz {
				width: 608rpx;
				font-weight: 400;
				font-size: 30rpx;
				color: #00808A;
			}

			.xian {
				position: relative;
				width: 608rpx;
				height: 1rpx;
				background-color: #f7f7f7;
				margin-top: 10rpx;
				margin-bottom: 10rpx;
			}

			.xxmsg {
				width: 608rpx;
				display: flex;
				flex-direction: row;

				.msgs {
					font-weight: 400;
					font-size: 26rpx;
					color: #333333;
					line-height: 45rpx;

					.name {
						letter-spacing: 51rpx;
					}
				}

				.grmsg {
					font-weight: 400;
					font-size: 26rpx;
					color: #808080;
					line-height: 40rpx;
					margin-top: 5rpx;
					margin-left: 30rpx;
				}
			}
		}

		.goods {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 674rpx;
			height: 264rpx;
			background-color: #ffffff;
			margin-top: 13rpx;
			border-radius: 20rpx;

			.spnum {
				width: 608rpx;
				font-weight: 400;
				font-size: 30rpx;
				color: #00808A;
			}

			.xian {
				position: relative;
				width: 608rpx;
				height: 1rpx;
				background-color: #f7f7f7;
				margin-top: 15rpx;
				margin-bottom: 20rpx;
			}

			.taocan {
				width: 608rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.taocan_l {
					width: 580rpx;
					display: flex;

					.tcleft {
						image {
							width: 129rpx;
							height: 129rpx;
							border-radius: 11rpx;
						}
					}

					.tcright {
						height: 125rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 17rpx;

						.tcname {
							width: 400rpx;
							font-weight: 400;
							font-size: 27rpx;
							color: #333333;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.moren {
							font-weight: 400;
							font-size: 20rpx;
							color: #868686;
						}

						.jiage {
							font-weight: 400;
							font-size: 24rpx;
							color: #D81A31;
						}
					}
				}

				.taocan_r {
					font-weight: 400;
					font-size: 24rpx;
					color: #868686;
				}


			}
		}

		.freight {
			width: 674rpx;
			height: 279rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			background-color: #ffffff;
			margin-top: 13rpx;
			border-radius: 20rpx;

			.f_top {
				width: 608rpx;
				display: flex;
				justify-content: space-between;

				.top_l {
					font-weight: 400;
					font-size: 30rpx;
					color: #00808A;
				}

				.top_r {
					font-weight: 400;
					font-size: 30rpx;
					color: #333333;
				}
			}

			.xian {
				position: relative;
				width: 608rpx;
				height: 1rpx;
				background-color: #f7f7f7;
				margin-top: 15rpx;
				margin-bottom: 20rpx;
			}

			.bzmsg {
				width: 608rpx;
				display: flex;
				flex-direction: column;

				.beizhu {
					font-weight: 400;
					font-size: 30rpx;
					color: #00808A;
					margin-bottom: 18rpx;
				}

				.bz_ipt {
					background-color: #f9f9f9;
					width: 608rpx;
					height: 95rpx;
					border-radius: 15rpx;

					textarea {
						font-weight: 400;
						font-size: 26rpx;
						color: #808080;
						margin: 23rpx;
						width: 570rpx;
					}
				}
			}
		}

		.bill {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-top: 13rpx;
			width: 674rpx;
			height: 358rpx;
			background-color: #ffffff;
			font-size: 26rpx;
			border-radius: 20rpx;

			.kpmsg {
				width: 608rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;

				text {
					font-weight: 400;
					font-size: 26rpx;
					color: #808080;
					margin-left: 19rpx;
				}
			}

			.xian {
				position: relative;
				width: 608rpx;
				height: 1rpx;
				background-color: #eeeeee;
				margin-top: 10rpx;
				margin-bottom: 10rpx;
			}

			.xian:before {
				content: "";
				position: absolute;
				top: -0.5rpx;
				left: 0;
				width: 100%;
				height: 1rpx;
				background-color: #eeeeee;
				transform: scaleY(0.5);
			}

			.list {
				width: 608rpx;

				.item {
					display: flex;
					flex-direction: row;
					line-height: 43rpx;

					.label_txt {
						font-weight: 400;
						font-size: 26rpx;
						color: #333333;
					}

					.letsps {
						letter-spacing: 50rpx;
					}

					.khh {
						letter-spacing: 13rpx;
					}

					input {
						font-weight: 400;
						font-size: 26rpx;
						color: #808080;
					}

					.gsxm {
						margin-left: 50rpx;
					}

					.yhkh {
						margin-left: 42rpx;
					}
				}
			}

		}

		.total {
			position: fixed;
			bottom: 0;
			width: 750rpx;
			height: 154rpx;
			background-color: #ffffff;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;

			.heji {
				display: flex;
				flex-direction: row;

				.hjjg {
					font-weight: 400;
					font-size: 30rpx;
					color: #333333;
				}

				.jiage {
					font-weight: 500;
					font-size: 34rpx;
					color: #D81A31;
				}
			}

			.hjbtn {
				width: 239rpx;
				height: 69rpx;

				.ljzf {
					width: 239rpx;
					line-height: 69rpx;
					height: 69rpx;
					border-radius: 40rpx;
					background: linear-gradient(to right bottom, RGBA(59, 195, 178, 1), RGBA(21, 140, 149, 1));
					font-weight: 400;
					font-size: 30rpx;
					color: #FFFFFF;
				}
			}
		}
	}
</style>